<template>
  <div class="add_product_container">
    <div class="top_title_container">
      <span class="indicator"></span>
      <span class="text">产品筛选</span>
    </div>
    <div class="content_container">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="left_container">
            <div class="grey_title_container">
              <span class="text">学科产品</span>
            </div>
            <div class="tree_container">
              <el-input
                size="mini"
                v-model="filterText"
                placeholder="请输入查询内容">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-tree
                ref="cateTree"
                @node-click="cateClick"
                :filter-node-method="filterNode"
                :props="productTreeProps"
                :load="getProductCate"
                style="margin-top: 12px;"
                accordion
                lazy>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="right_container">
            <div class="search_container">
              <div class="grey_title_container">
                <div class="left">
                  <span style="margin-right: 6px;" class="text"><i class="el-icon-search"></i></span>
                  <span class="text">筛选查询</span>
                </div>
                <div class="right">
                  <el-button size="small" type="primary" @click="getProducts">搜索</el-button>
                </div>
              </div>
              <div class="search_content_container form_container">
                <el-row :gutter="10">
                  <el-col :span="6" class="item">
                    <div class="text_container five_text_width">
                      <span class="text">产品名称:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.productName"></el-input>
                  </el-col>
                  <el-col :span="5" class="item">
                    <div class="text_container four_text_width">
                      <span class="text">医学类型:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.medicalType"></el-input>
                  </el-col>
                  <el-col :span="8" class="item">
                    <div class="text_container six_text_width">
                      <span class="text">价格范围:</span>
                    </div>
                    <el-input size="mini" v-model="searchOptions.priceFrom"></el-input>
                    <span style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
                    <el-input size="mini" v-model="searchOptions.priceTo"></el-input>
                  </el-col>
                  <el-col :span="5" class="item">
                    <div class="text_container four_text_width">
                      <span class="text">是否体检:</span>
                    </div>
                    <el-select v-model="searchOptions.isTest" placeholder="请选择" size="mini" style="width: 100%;">
                      <el-option
                        v-for="item in isTestOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 12px;">
                  <el-row :gutter="10">
                    <el-col :span="6" class="item">
                      <div class="text_container five_text_width">
                        <span class="text">是否有细目:</span>
                      </div>
                      <el-select v-model="searchOptions.hasDetail" placeholder="请选择" size="mini" style="width: 100%;">
                        <el-option
                          v-for="item in hasDetailOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="5" class="item">
                      <div class="text_container four_text_width">
                        <span class="text">产品状态:</span>
                      </div>
                      <el-select v-model="searchOptions.productState" placeholder="请选择" size="mini"
                                 style="width: 100%;">
                        <el-option
                          v-for="item in productStateOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8" class="item">
                      <div class="text_container six_text_width">
                        <span class="text">状态变化时间:</span>
                      </div>
                      <el-date-picker
                        v-model="searchOptions.dateChangeFrom"
                        size="mini"
                        class="date_no_icon"
                        type="date"/>
                      <span style="color: #666666;font-size: 11px;margin-left: 7px; margin-right: 7px;">至</span>
                      <el-date-picker
                        v-model="searchOptions.dateChangeTo"
                        size="mini"
                        class="date_no_icon"
                        type="date"/>
                    </el-col>
                    <el-col :span="5" class="item">
                      <div class="text_container four_text_width">
                        <span class="text">网络销售:</span>
                      </div>
                      <el-select value="1" placeholder="请选择" size="mini" style="width: 100%;">
                        <el-option
                          value="1">
                        </el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-row>
              </div>
            </div>
            <div class="all_products_container">
              <div class="grey_title_container">
                <span class="indicator"/>
                <span class="text">待选产品</span>
              </div>
              <div class="table_container">
                <el-table
                  ref="allProductsTable"
                  v-loading="isLoading"
                  @select="productSelect"
                  @select-all="productSelectAll"
                  :data="products"
                  border>
                  <el-table-column
                    type="selection"
                    fixed
                    resizable
                    width="35">
                  </el-table-column>
                  <el-table-column
                    type="index"
                    resizable
                    align="center"
                    label="序号">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    width="200"
                    resizable
                    label="名称"
                    prop="simplename">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="价格"
                    resizable
                    prop="productprice">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="价格2"
                    resizable
                    prop="productprice2">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="productcount"
                    resizable
                    label="次数">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="一级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="二级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="三级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="打折">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.isagio)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="体验">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.istest)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="折扣">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.rebate)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="业务类型">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="是否有物资">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.ismaterial)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="状态">
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagination">
                <el-pagination
                  @current-change="pageChange"
                  :total="total"
                  :page-size="10">
                </el-pagination>
              </div>
            </div>
            <div class="selected_products_container">
              <div class="grey_title_container">
                <span class="indicator"/>
                <span class="text">已选产品</span>
              </div>
              <div class="table_container">
                <el-table
                  ref="selectedProductsTable"
                  @select="selectedProductsSelect"
                  @select-all="selectedProductsSelectAll"
                  :data="selectedProducts"
                  border>
                  <el-table-column
                    type="selection"
                    fixed
                    width="35">
                  </el-table-column>
                  <el-table-column
                    type="index"
                    align="center"
                    resizable
                    label="序号">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    width="200"
                    label="名称"
                    resizable
                    prop="simplename">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="价格"
                    resizable
                    prop="productprice">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="价格2"
                    resizable
                    prop="productprice2">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="productcount"
                    resizable
                    label="次数">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="一级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="二级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="三级病种">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="打折">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.isagio)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="体验">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.istest)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="折扣">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.rebate)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="业务类型">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="是否有物资">
                    <template slot-scope="scope">
                      <span class="text">{{getYesOrNo(scope.row.ismaterial)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    resizable
                    label="状态">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="operate_container">
              <el-button type="primary" style="padding-left: 44px; padding-right: 44px; margin-right: 26px;"
                         @click="submit">提交
              </el-button>
              <el-button style="padding-left: 44px; padding-right: 44px;" @click="cancel">取消</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class AddProduct extends Vue {
    productTreeProps = {
      id: 'pbtid',
      label: 'pbtname'
    };
    filterText = '';
    isTestOptions = [{value: '1', label: '是'}, {value: '0', label: '否'}];
    hasDetailOptions = [{value: '1', label: '是'}, {value: '0', label: '否'}];
    productStateOptions = [{value: '1', label: '上架'}, {value: '2', label: '下架'}];
    searchOptions = {
      selectedCate: '',
      productName: '',
      medicalType: '',
      priceFrom: '',
      priceTo: '',
      isTest: '',
      hasDetail: '',
      productState: '',
      dateChangeFrom: '',
      dateChangeTo: '',
      currentPage: 1,
    };
    isLoading = false;
    products = [];
    total = 0;
    preSelectedCount = 0;
    selectedProducts = [];

    created() {
      this.selectedProducts = this.selectedProducts.concat(this.$store.state.ConsumerBilling.selectedProducts);
      this.getProducts();
    }

    @Watch('filterText')
    onFilterTextChange() {
      this.$refs.cateTree.filter(this.filterText);
    }

    /**
     * 获取左边分类数据
     * @param node
     * @param resolve
     */
    getProductCate(node, resolve) {
      let parentId = '';
      if (node.level === 0) {
        parentId = null;
      } else {
        parentId = node.data.pbtid;
      }
      this.$ajax({
        method: 'get',
        url: '/fin/product/cateList.do',
        params: {
          parentId: parentId
        }
      }).then(resp => {
        if (resp.data.code === 200) {
          resolve(resp.data.data);
        }
      }, error => {
        this.$notify.showError('获取数据异常');
      });
    }

    /**
     * 获取产品列表
     */
    getProducts() {
      this.isLoading = true;
      this.$ajax({
        method: 'get',
        url: '/fin/product/findProductPage.do',
        params: {
          productname: this.searchOptions.productName,
          minProductPrice: this.searchOptions.priceFrom,
          maxProductPrice: this.searchOptions.priceTo,
          productstate: this.searchOptions.productState,
          pbtid: this.searchOptions.selectedCate,
          currentPage: this.searchOptions.currentPage
        }
      }).then(resp => {
        this.isLoading = false;
        this.preSelectedCount = 0;
        if (resp.data.code === 200) {
          this.products = resp.data.data.list;
          this.total = resp.data.data.count;
          setTimeout(() => {
            for (let product of this.products) {
              for (let selectedProduct of this.selectedProducts) {
                if (product.productid === selectedProduct.productid) {
                  this.preSelectedCount += 1;
                  this.$refs.allProductsTable.toggleRowSelection(product, true);
                  break;
                }
              }
            }
          }, 100);
          this.setSelectedProductsChecked();
        } else {
          this.$notify.showWarning('获取产品异常');
        }
      }, error => {
        this.isLoading = false;
        this.$notify.showWarning('获取产品异常');
      });
    }

    /**
     * 过滤左边树
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.pbtname.indexOf(value) !== -1;
    }

    cateClick(data, node) {
      this.searchOptions.selectedCate = data.pbtid;
      this.searchOptions.currentPage = 1;
      this.getProducts();
    }

    /**
     * 分页
     * @param page
     */
    pageChange(page) {
      this.searchOptions.currentPage = page;
      this.getProducts();
    }

    /**
     * 所有产品点击checkbox
     * @param selection
     * @param row
     */
    productSelect(selection, row) {
      if (selection.length > this.preSelectedCount) {
        this.addSelectedProduct(row);
        this.setSelectedProductsChecked();
      } else {
        this.removeSelectedProduct(row);
        this.setSelectedProductsChecked();
      }
      this.preSelectedCount = selection.length;
    }

    /**
     * 所有产品点击全选
     * @param products
     */
    productSelectAll(products) {
      if (products.length === 0) {
        this.removeSelectedProducts(this.products);
        this.setSelectedProductsChecked();
      } else {
        this.addSelectedProducts(products);
        this.setSelectedProductsChecked();
      }
      this.preSelectedCount = products.length;
    }

    /**
     * 已选商品手动点击checkbox
     */
    selectedProductsSelect(products, row) {
      this.handleSelectedProductSelect(products);
    }

    /**
     * 已选商品点击全选
     */
    selectedProductsSelectAll(products) {
      this.handleSelectedProductSelect(products);
    }

    /**
     *  已选中商品手动勾选checkbox后的处理
     */
    handleSelectedProductSelect(products) {
      for (let product of this.selectedProducts) {
        let hasMatch = false;
        for (let selectedProduct of products) {
          if (selectedProduct.productid === product.productid) {
            hasMatch = true;
            product.isChecked = true;
            break;
          }
        }
        if (!hasMatch) {
          product.isChecked = false;
        }
      }
    }

    /**
     * 设置已选产品的选中状态
     */
    setSelectedProductsChecked() {
      setTimeout(() => {
        for (let selectedProduct of this.selectedProducts) {
          if (selectedProduct.isChecked) {
            this.$refs.selectedProductsTable.toggleRowSelection(selectedProduct, true);
          } else {
            this.$refs.selectedProductsTable.toggleRowSelection(selectedProduct, false);
          }
        }
      }, 100);
    }

    getYesOrNo(option) {
      if (option === 1) {
        return '是';
      } else {
        return '否';
      }
    }

    /**
     * 保存已选商品至Vuex并回退至上一界面
     */
    submit() {
      this.filterChecked();
      if (this.selectedProducts.length === 0) {
        this.$notify.showWarning('请选择要添加的产品');
        return;
      }
      this.$store.commit('setSelectedProducts', this.selectedProducts);
      this.$router.go(-1);
    }

    /**
     * 直接取消
     */
    cancel() {
      this.$router.go(-1);
    }

    /**
     *  向已选商品中添加商品
     */
    addSelectedProduct(product) {
      for (let selectedProduct of this.selectedProducts) {
        if (selectedProduct.productid === product.productid) {
          return;
        }
      }
      product.isChecked = true;
      this.selectedProducts.push(product);
    }

    /**
     * 批量向已选商品中添加
     * @param products
     */
    addSelectedProducts(products) {
      products = products.filter(product => {
        for (let selectedProduct of this.selectedProducts) {
          if (product.productid === selectedProduct.productid) {
            return false;
          }
        }
        return true;
      });
      for (let product of products) {
        if (product.isChecked === undefined || product.isChecked === null) {
          product.isChecked = true;
        }
      }
      this.selectedProducts = this.selectedProducts.concat(products);
    }

    /**
     * 从已选商品中移除商品
     * @param product
     */
    removeSelectedProduct(product) {
      this.selectedProducts = this.selectedProducts.filter(selectedProduct => {
        return selectedProduct.productid !== product.productid;
      });
    }

    /**
     * 批量从已选商品中移除
     * @param products
     */
    removeSelectedProducts(products) {
      this.selectedProducts = this.selectedProducts.filter(selectedProduct => {
        for (let product of products) {
          if (product.productid === selectedProduct.productid) {
            return false;
          }
        }
        return true;
      });
    }

    /**
     * 筛选出已选商品中，checkbox选中的部分
     */
    filterChecked() {
      this.selectedProducts = this.selectedProducts.filter(selectedProduct => {
        return selectedProduct.isChecked;
      });
    }

  }
</script>

<style scoped>
  .content_container {
  }

  .left_container, .right_container {
    border: 1px solid #f0f0f0;
  }

  .search_container {
  }

  .search_content_container {
    padding: 15px 10px;
  }

  .operate_container {
    margin-top: 32px;
    margin-bottom: 32px;
    text-align: center;
  }

  .tree_container {
    padding: 12px;
  }

  .pagination {
    text-align: center;
  }
</style>
